//懒得写脚本,直接复制这边基础结构
import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'

//import Using ES6 syntax
import WeUI from 'react-weui';
import 'whatwg-fetch'
const {Button, Footer, FooterLink, Toptips, Toast} = WeUI;

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';


let teamInfoBox = {
    height: '80%',
}, teamContactLinkBox = {
    height: '20%',
}, teamName = {
    padding: '16rem 4rem 0',
    fontSize: '3rem',
    color: '#4C4C4C',
    lineHeight: '3.5rem'
}, expireTimeTitle = {
    padding: '8rem 4rem 0',
    fontSize: '2.6rem',
    color: '#9B9B9B',
    lineHeight: '3rem',
}, expireTime = {
    padding: '1rem 4rem 0',
    fontSize: '3.5rem',
    color: '#4990E2',
    lineHeight: '3rem',
    fontFamily: 'SFNSText-Light'
}, noContact = {
    padding: '8rem 4rem 0',
    fontFamily: 'PingFangSC-Light',
    fontSize: '3.5rem',
    color: '#4990E2'
};
export default class TeamInfo extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.contactDetail = this.contactDetail.bind(this);
        this.contactList = this.contactList.bind(this);
        this.state = {
            teamId: this.props.location.query.teamId,
            teamName: "",
            contactId: 0,
            contactExpireTime: '',
            isContact: false,
            showToptips: false,
            showLoading: true,
            topTipsMsg: "网络不给力，请重试！"
        }
    }

    showWarn() {
        this.setState({showToptips: true, showLoading: false,});

        this.state.warnTimer = setTimeout(()=> {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
    }

    componentDidMount() {
        let self=this;
        fetch(getHost() + "/team/" + this.state.teamId, {
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    let teamInfo = data.data;
                    self.setState({
                        teamId: teamInfo.id,
                        teamName: teamInfo.name,
                        contactId: teamInfo.contact.id,
                        contactExpireTime: teamInfo.contact.expireTime,
                        isContact: false,
                        showToptips: false,
                        showLoading: false
                    });
                } else {
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }

    LeftClick() {
    }

    contactList() {
        window.location.hash = "/ContractList?teamId = " + this.state.teamId;
        return;
    }

    contactDetail() {
        if (this.state.isContact) {
            window.location.hash = "/ContractDetail?contactId=" + this.state.contactId;
        } else {
            window.location.hash = "/ZoneList";
        }
        return;
    }

    render() {
        let contactInfo = null;
        if (this.state.isContact) {
            contactInfo = <div>
                <div style={expireTimeTitle}>到期时间</div>
                <div style={expireTime}>{this.state.contactExpireTime}</div>
            </div>
        } else if (this.state.teamName) {
            contactInfo = <div style={noContact}>暂无合约</div>
        }
        let btnText = "去租工位";
        if (this.state.isContact) {
            btnText = "查看合约信息"
        }
        return (
            <div style={{height: '100%', padding: '0 2rem'}}>
                <NavigationBar Title="企业列表" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <div style={teamInfoBox}>
                    <div style={teamName}>{this.state.teamName}</div>
                    {contactInfo}
                </div>
                <div style={teamContactLinkBox}>
                    <Button onClick={this.contactDetail}>{btnText}</Button>
                    <Footer>
                        <FooterLink onClick={this.contactList} style={{marginTop: '4rem'}}>查看所有合约列表</FooterLink>
                    </Footer>
                </div>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}
//属性默认值
TeamInfo.defaultProps = {};

//属性
TeamInfo.propTypes = {};